<template>
  <div class="content">
    <div class="header">
      <p>起点中文网</p>
      <van-tabs type="card">
        <van-tab title="男生"></van-tab>
        <van-tab title="女生"></van-tab>
      </van-tabs>
      <button class="btn">打开App</button>
    </div>
    <van-search
      v-model="value"
      @search="onSearch"
      placeholder="请输入搜索关键词"
    />
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <div class="tab">
      <div v-for="(item, index) in tab" :key="index" @click="goList">
        <img :src="item.img" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
    <div class="list">
      <dl
        v-for="(item, index) in list"
        :key="index"
        style="display: flex"
        @click="goDetail(item.id)"
      >
        <dt>
          <img :src="item.src" alt="" />
        </dt>
        <dd>
          <p>{{ item.title }}</p>
          <span>{{ item.word }}</span>
          <span>{{ item.price }}</span>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      value: '',
      tab: [],
      list: [],
    }
  },
  methods: {
    onSearch() {
      this.$router.push('/search')
    },
    async getTab() {
      let resp = await axios.get('/api/tab')
      this.tab = resp.data.tab
    },
    async getList() {
      let resp = await axios.get('/api/list')
      this.list = resp.data.list
    },
    goDetail(id) {
      this.$router.push(`/detail/${id}`)
    },
    goList() {
      this.$router.push('/home/list')
    },
  },
  created() {
    this.getTab()
    this.getList()
  },
}
</script>
<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  .header {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    p {
      font-size: 16px;
      font-weight: bold;
      color: #f00;
    }
    .btn {
      border-radius: 35%;
      background-color: pink;
      color: #f00;
    }
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .tab {
    width: 100%;
    height: 220px;
    display: flex;
    border: 1px solid #ccc;
    overflow: scroll;
  }
}
</style>
